<template>
  <view class="wrap">
    <image src="../../static/detailBg.png" mode="widthFix" class="detailBg"></image>
    <view class="header">
      <uv-navbar leftText="" :fixed="false" title="" leftIconColor='#FFF' bgColor='rgba(0,0,0,0)' safeAreaInsetTop placeholder autoBack>
        <template v-slot:right>
          <view class="uv-nav-slot">
            <view class="rightImage" @click="goRank">
              <image src="../../static/detailIcon1.png" class="img"></image>
            </view>
            <view class="rightImage" @click="goSearch">
              <image src="../../static/detailIcon2.png" class="img"></image>
            </view>
            <view class="rightImage" @click="goSetting">
              <image src="../../static/detailIcon3.png" class="img"></image>
            </view>
          </view>
        </template>
      </uv-navbar>
    </view>
    <view class="userInfo">
      <view class="left">
        <view class="avatar">
          <image :src="setUrl(body.logo_image)" class="img" mode="aspectFill"></image>
        </view>
        <view class="user">
          <view class="title">{{ body.name }}</view>
          <view class="down">
            <view class="info">
              <view class="inch" v-for="(item,index) in avatars" :key="index">
                <image :src="setUrl(item.avatar)" class="img" mode="aspectFill" v-if="item.avatar"></image>
                <image src="../../static/logo.png" class="img" mode="aspectFill" v-else></image>
              </view>
            </view>
            <view class="ask" @click="goQuestion"><text class="font">去提问</text> <uv-icon name="arrow-right" color="#FFF" size="20rpx"></uv-icon></view>
          </view>
        </view>
      </view>
      <button class="btn" hover-class="none" @click="nowShare([1,2,3,4,6])">分享</button>
    </view>
    <view class="box">
      <view class="detailStatus" v-if="body.run_status == 1">
        <view class="status" :style="`background-image: url(${yesDetailStatus})`">
          <view class="left">
            <view class="desc">你的社群处于试运营状态</view>
            <view class="desc">最多可加入20人</view>
          </view>
          <view class="right" :style="`background-image: url(${nowUp})`" @click="upgrade">立即升级</view>
        </view>
      </view>
      <view class="part" v-if="columnList && columnList.length">
        <uv-scroll-list :indicator="false">
          <view class="scrollList">
            <view class="scroll" :style="`background-image: url(${topic})`" v-for="(item, index) in columnList" :key="index" @click="goColumn(item)">
              <view class="name">{{ item.name }}</view>
              <view class="icon">
                <uv-icon name="play-right-fill" size="30rpx" color="#B8B8B8"></uv-icon>
              </view>
            </view>
          </view>
        </uv-scroll-list>
      </view>
      <template v-if="!columnList.length">
        <view class="entrance" v-if="body.member_info && body.member_info.identity == 1" @click="addColumn">点击设置有吸引力的专栏</view>
      </template>
      <view class="tabs">
        <uv-tabs :list="tabList" :current='active' lineWidth='0' lineHeight='0' itemStyle="height: 64rpx;margin-right: 24rpx;padding: 0;" inactiveStyle='height: 64rpx;line-height: 64rpx; background: #F5F5F5; border-radius: 32rpx;padding: 0 11px;colo: #000;' activeStyle="height: 64rpx;line-height: 64rpx; background: #2B2B2B; border-radius: 32rpx;padding: 0 11px;color: #FFF" @click='tabClick'></uv-tabs>
      </view>
      <view class="pinTop" v-if="noticeList.length">
        <view class="icon">
          <image src="../../static/pintop.png" class="img"></image>
        </view>
        <view class="content">
          <uv-notice-bar :text="noticeList" step icon='' duration='5000' color='#737373' fontSize='28rpx' bgColor='#FFFFFF' :customStyle='{padding: 0}' @click="goTheme"></uv-notice-bar>
        </view>
      </view>
      <view class="theme">
        <template v-if="active == 3">
          <answer :detail="item" :groupDetail='body' v-for="(item, index) in list" :key="index" @followClick='followClick' @tagMore='tagMore(item)'></answer>
        </template>
        <template v-else>
          <theme :detail='item' v-for="(item, index) in list" :key="index" @followClick='followClick' @tagMore='tagMore(item)'></theme>
        </template>
        <view class="themeEdit" @click="goEdit">
          <image src="../../static/themeEdit.png" class="img"></image>
        </view>
      </view>
    </view>
    
    <uv-safe-bottom></uv-safe-bottom>
    
    <share ref="onShare" :show='shareShow' @click="getShare"></share>
    <more ref="onMore" :themeType="active == 3 ? 'answer' : 'theme'" @click="setList"></more>
  </view>
</template>

<script setup>
import yesDetailStatus from '@/static/yesDetailStatus.png';
import nowUp from '@/static/nowUp.png';
import topic from '@/static/topic.png';
import theme from '../../components/group/theme.vue';
import answer from '../../components/group/answer.vue';
import more from '../../components/group/more.vue';
import { ref, computed } from 'vue';
import { post } from '@/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { useOrder, useUser } from '@/store';
import { getGroup, setUrl, checkServe, toast, getAddScore } from '@/common';

const onShare = ref(null);
const onMore = ref(null);
const modal = ref(null);

let id = '';
let tabList = [
  {name: '最新', type: {is_new: 1} },
  {name: '精华', type: {is_best: 1}},
  {name: '只看群主', type: {see_leader: 1}},
  {name: '问答'},
  {name: '文件', type: {type: 2}},
  {name: '图文', type: {type: 1}},
];
let active = ref(0);
let avatars = ref([]);
let columnList = ref([]);
let noticeList = ref([]);
let notice = ref([]);
let list = ref([]);
let page = 1;
let limit = 15;
let last_page = 0;
let shareShow = ref([]);

let body = computed(() => {
  const store = useOrder();
  return store.group;
});
let userInfo = computed(() => {
  const store = useUser();
  return store.userInfo;
});

onLoad((option) => {
  id = option.id;
})
onShow(() => {
  getGroup(id);
  getGroupUser();
  getColumnList();
  getIsTop();
  if(active.value == 3){
    initanswerList();
  }else{
    initThemeList(tabList[active.value].type);
  }
})
// 获取可提问的用户列表
function getGroupUser(){
  const params = {
    page: 1,
    limit: 100,
    association_id: id
  }
  let user = [];
  post('api/association_question/askQuestionList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      data.some((e, index) => {
        user.push(e.user);
        if(index == 4) return true
      })
      avatars.value = user;
    }
  })
}
// 获取专栏列表
function getColumnList(){
  const params = {
    page: 1,
    limit: 100,
    association_id: id
  }
  post('api/association_column/getAssociationColumnList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      columnList.value = data.data;
    }
  })
}
// 获取主题列表数据
function getThemeList(value){
  const obj = {
    page,
    limit,
    association_id: id
  }
  let params = {};
  console.log(value);
  if(value){
    params = Object.assign(obj, value);
  }
  post('api/association_theme/getAssociationThemeList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
    }
  })
}
// 获取已置顶的主题列表
function getIsTop(){
  const params = {
    association_id: id,
    is_top: 1,
    is_new: 1,
    page: 1,
    limit: 1
  }
  post('api/association_theme/getAssociationThemeList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      notice.value = data;
      noticeList.value = data.map(e => e.content);
    }
  })
}
// 获取提问列表数据
function getanswerList(){
  const params = {
    page,
    limit,
    association_id: id,
    solve_status: 2
  }
  post('api/association_question/getQuestionAnswerList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
    }
  })
}
// 获取置顶提问列表数据
function getanswerIsTopList(){
  const params = {
    page: 1,
    limit: 1,
    association_id: id,
    solve_status: 2,
    is_top: 1
  }
  post('api/association_question/getQuestionAnswerList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      notice.value = data;
      noticeList.value = data.data.map(e => e.content);
      console.log(noticeList.value);
    }
  })
}
// 分享
function getShare(row){
  if(row.id == 5) toast('开发中...');
  
  let rows = body.value;
  let title = `我向你分享了【${rows.name}】,来看看吧。`;
  let summary = rows.desc;
  let href = `${uni.$uv.http.config.webUrl}/pages/group/not-detail?id=${id}`;
  let imageUrl = setUrl(body.value.logo_image);
  
  if(row.id == 6) {
    uni.setClipboardData({
    	data: href,
    	success: function () {
    		toast('复制成功');
    	}
    });
    onShare.value.close();
    return;
  }
  function goShare(){
    let scene = {
      1: 'WXSceneSession',
      2: 'WXSceneTimeline'
    }
    uni.share({
      provider: row.share,
      scene: scene[row.id],
      type: 0,
      href,
      title,
      summary,
      imageUrl,
      success(res) {
        setTimeout(() => {
          const params = {
            type: 1,
            target_id: id,
            share_user_id: userInfo.value.user_id
          }
          console.log(params);
          getAddScore(params, '分享成功');
        }, 500)
      },
      fail(err) {
        console.log(JSON.stringify(err));
        console.log('分享失败');
      },
      complete() {
        console.log('初始化');
        rowShare = '';
      }
    })
  }
  onShare.value.close();
  checkServe('share', row.share, goShare);
}
function nowShare(row){
  shareShow.value = row;
  onShare.value.open();
}
function setList(){
  page = 1;
  list.value = [];
  if(active.value != 3){
    getThemeList(tabList[active.value].type);
    getIsTop()
  }else{
    getanswerList();
    getanswerIsTopList();
  }
}
function tagMore(row){
  console.log(row);
  onMore.value.user = body.value.member_info;
  onMore.value.detail = row;
  onMore.value.open();
}
function initanswerList(){
  list.value = [];
  page = 1;
  getanswerList();
}
function initThemeList(value){
  list.value = [];
  page = 1;
  getThemeList(value);
}
function followClick(row){
  list.value.forEach(e => {
    if(row.userId == e.user.id){
      if(active.value == 3){
        e.answer.user[row.type] = e.answer.user[row.type] == 1 ? 0 : 1;
      }else{
        e[row.type] = e[row.type] == 1 ? 0 : 1;
      }
      
    }
  })
}
function tabClick(value){
  active.value = value.index;
  if(value.index == 3){
    getanswerIsTopList();
    initanswerList();
  }else{
    getIsTop();
    initThemeList(value.type)
  }
}
function goTheme(index){
  console.log(index);
  console.log(notice.value[index].id);
  uni.navigateTo({
    url: `/pages/group/themeDetail?id=${notice.value[index].id}`
  });
}
function goColumn(row){
  uni.navigateTo({
    url: `/pages/group/column?id=${row.id}&aid=${id}`
  });
}
function goSearch(){
  uni.navigateTo({
    url: `/pages/group/search?id=${id}`
  });
}
function goSetting(){
  uni.navigateTo({
    url: '/pages/group/setting/index'
  });
}
function upgrade(){
  uni.navigateTo({
    url: '/pages/group/setting/formal'
  });
}
function goEdit(){
  uni.navigateTo({
    url: `/pages/group/issue?title=${body.value.name}`
  });
}
function goQuestion(){
  uni.navigateTo({
    url: '/pages/group/question/index'
  });
}
function addColumn(){
  uni.navigateTo({
    url: '/pages/group/setting/column'
  });
}
function goRank(){
  uni.navigateTo({
    url: `/pages/group/ranking?id=${id}`
  });
}
</script>

<style lang="scss" scoped>
  .themeEdit{
    width: 150rpx;
    height: 150rpx;
    position: fixed;
    right: 30rpx;
    bottom: 150rpx;
    z-index: 3;
  }
  .box{
    width: 100%;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;
    /* #ifdef H5 */
    margin-top: 60rpx;
    /* #endif */
    /* #ifndef H5 */
    margin-top: 40rpx;
    /* #endif */
    position: relative;
    z-index: 3;
    padding: 0 30rpx;
    .theme{
      background-color: #fff;
      
    }
    .pinTop{
      width: 100%;
      padding-top: 40rpx;
      padding-bottom: 28rpx;
      border-bottom: 1px solid #EFEFEF;
      display: flex;
      align-items: center;
      .content{
        flex: 1;
        width: 0;
        padding-left: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .test{
          font-weight: 400;
          font-size: 28rpx;
          color: #737373;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .icon{
        width: 64rpx;
        height: 32rpx;
        font-size: 0;
      }
    }
    .tabs{
      padding-top: 40rpx;
    }
    .entrance{
      background-color: #F5F5F5;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 28rpx;
      border-radius: 10rpx;
      margin-top: 20rpx;
    }
    .part{
      padding-top: 40rpx;
      :deep(.uv-scroll-list){
        padding-bottom: 0;
      }
      .scrollList{
        display: flex;
        .scroll{
          margin-right: 24rpx;
          width: 393rpx;
          height: 140rpx;
          padding: 24rpx;
          background-repeat: no-repeat;
          background-size: contain;
          display: flex;
          justify-content: space-between;
          &:last-child{
            margin-right: 0;
          }
          .name{
            font-weight: 500;
            font-size: 28rpx;
            color: #2B2B2B;
            width: 300rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .detailStatus{
      padding-top: 40rpx;
      .status{
        width: 100%;
        height: 160rpx;
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        .left{
          .desc{
            font-weight: 500;
            font-size: 28rpx;
            color: #FFE0B4;
          }
        }
        .right{
          width: 160rpx;
          height: 64rpx;
          line-height: 64rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #372818;
          background-repeat: no-repeat;
          background-size: contain;
          text-align: center;
        }
      }
    }
  }
  .userInfo{
    width: 100%;
    padding: 0 30rpx;
    padding-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    .left{
      flex: 1;
      display: flex;
      align-items: center;
      .user{
        padding-left: 26rpx;
        .down{
          padding-top: 24rpx;
          display: flex;
          align-items: center;
          .info{
            display: flex;
            align-items: center;
            .inch{
              width: 48rpx;
              height: 48rpx;
              border: 1px solid #FFF;
              border-radius: 50%;
              overflow: hidden;
              margin-left: -16rpx;
              position: relative;
              &:first-child{
                margin-left: 0;
              }
            }
          }
          .ask{
            width: 121rpx;
            height: 48rpx;
            background: rgba($color: #FFFFFF, $alpha: .2);
            border-radius: 48rpx;
            line-height: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 12rpx;
            .font{
              text-align: center;
              font-weight: 400;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
        }
        .title{
          font-weight: 500;
          font-size: 40rpx;
          color: #FFFFFF;
        }
      }
      .avatar{
        width: 150rpx;
        height: 150rpx;
        border: 1px solid rgba($color: #F5F5F5, $alpha: .2);
        border-radius: 12rpx;
        overflow: hidden;
      }
    }
    .btn{
      width: 104rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: #E43222;
      border-radius: 64rpx;
      font-weight: 500;
      font-size: 28rpx;
    }
  }
  .header{
    position: relative;
    z-index: 2;
    .uv-nav-slot{
      display: flex;
      align-items: center;
      .rightImage{
        width: 40rpx;
        height: 40rpx;
        margin-left: 40rpx;
      }
    }
  }
  .detailBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
  }
</style>